<template>
  <nav>
    <top-header>{{ headerTitle }}</top-header>
    <search-input :placeholder="placeholder" :maxlength="maxlength"></search-input>
    <router-view />
    <tab-bar></tab-bar>
  </nav>
</template>

<script>
import TopHeader from "./conponents/TopHeader";
import TabBar from './conponents/TabBar'
import SearchInput from './conponents/SearchInput'
import { useStore } from "vuex";
import { isReactive, watch } from "vue";
import {useRouter} from 'vue-router'

export default {
  setup() {
    const store = useStore();
    // console.log(store.state);
    // console.log(isReactive(store.state));
    const router = useRouter()
    // console.log(router.currentRoute.value)
    watch(
      () => router.currentRoute.value.name,
      (value) =>{
        store.commit('setHeaderTitle',value)
        store.commit('setPlaceHolder',value)
        store.commit('setMaxLength',value)
        store.commit('setField',value)
      }
    )

    return store.state;
  },
  components: {
    TopHeader,
    TabBar,
    SearchInput
  },
};
</script>

<style lang="less">
.container {
  padding: 0.82rem 0 0.44rem 0;
  box-sizing: border-box;
}
</style>
